<template>
  <div class="role-add-container">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <h1>新增角色</h1>
      <div class="action-buttons">
        <el-button @click="handleGoBack">
          <el-icon><ArrowLeft /></el-icon> 返回列表
        </el-button>
        <el-button type="primary" @click="handleSubmit">
          <el-icon><Check /></el-icon> 提交
        </el-button>
        <el-button @click="resetForm">
          <el-icon><Refresh /></el-icon> 重置
        </el-button>
      </div>
    </div>

    <!-- 表单卡片 -->
    <el-card class="form-card">
      <el-form
        ref="roleFormRef"
        :model="roleForm"
        :rules="formRules"
        label-width="120px"
        class="role-form"
      >
        <!-- 基本信息区域 -->
        <div class="form-section">
          <h2 class="section-title">基本信息</h2>
          <el-divider></el-divider>
        </div>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="角色名称" prop="name">
              <el-input v-model="roleForm.name" placeholder="请输入角色名称" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="角色编码" prop="code">
              <el-input v-model="roleForm.code" placeholder="请输入角色编码" clearable></el-input>
              <div class="form-hint">角色编码由小写字母、数字、下划线组成，长度3-20位</div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="角色描述" prop="description">
              <el-input
                v-model="roleForm.description"
                type="textarea"
                :rows="4"
                placeholder="请输入角色描述"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="roleForm.status">
                <el-radio label="1">启用</el-radio>
                <el-radio label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 权限设置提示 -->
        <div class="permission-tip">
          <el-alert
            title="提示"
            type="info"
            description="角色创建成功后，可通过'权限配置'按钮为角色分配具体权限"
            show-icon
          ></el-alert>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import {
  ArrowLeft,
  Check,
  Refresh
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';

// 路由实例
const router = useRouter();

// 表单引用
const roleFormRef = ref<any>(null);

// 表单数据
const roleForm = reactive({
  name: '',
  code: '',
  description: '',
  status: '1'
});

// 表单验证规则
const formRules = reactive({
  name: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 20, message: '角色名称长度2-20位', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入角色编码', trigger: 'blur' },
    { pattern: /^[a-z0-9_]{3,20}$/, message: '角色编码由小写字母、数字、下划线组成，长度3-20位', trigger: 'blur' }
  ],
  description: [
    { max: 500, message: '角色描述不能超过500个字符', trigger: 'blur' }
  ]
});

// 返回列表
const handleGoBack = () => {
  router.push({ name: 'RoleList' });
};

// 提交表单
const handleSubmit = async () => {
  try {
    // 表单验证
    await roleFormRef.value.validate();

    // 确认提交
    await ElMessageBox.confirm('确定要创建新角色吗？', '创建确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    });

    // 模拟API请求
    const loading = ElLoading.service({
      lock: true,
      text: '创建中...',
      background: 'rgba(0, 0, 0, 0.7)'
    });

    setTimeout(() => {
      loading.close();
      ElMessage.success('角色创建成功');
      router.push({ name: 'RoleList' });
    }, 1000);
  } catch (error) {
    // 表单验证失败或用户取消提交
    if (error !== 'cancel') {
      console.error('表单提交失败:', error);
    }
  }
};

// 重置表单
const resetForm = () => {
  roleFormRef.value.resetFields();
};
</script>

<style scoped lang="scss">
.role-add-container {
  padding: 0 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.form-card {
  margin-bottom: 20px;
}

.role-form {
  padding: 10px 0;
}

.form-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #303133;
}

.form-hint {
  color: #909399;
  font-size: 12px;
  margin-top: 4px;
}

.permission-tip {
  margin-top: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .role-add-container {
    padding: 0 10px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .action-buttons {
    flex-wrap: wrap;
    width: 100%;
  }

  .el-col {
    &.lg-12 {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }
}
</style>